<template>
	<view class="contanier">
		<view class="title">
			<image :src="userPhoto==''?'../../static/anonymous.png':userPhoto" mode="aspectFit" class="title-image" @click="upImage"></image>
			<view class="title-btn" v-if="!isUser">
				<u-button text="立即登录" @click="navToLogin()"></u-button>
				<u-button text="新建账号" @click="navToRegister()" class="u-button"></u-button>
			</view>
			<view class="title-btn" v-if="isUser">
				<u--text mode="text" :text="user.userName" color="#000000" size="20">aaa</u--text>
				<u--text mode="phone" :text="user.phone" color="#8b8b8b" style="margin-top: 20rpx;">aaa</u--text>
				<u-button type="error" shape="circle" text="退出登录" :plain="true" @click="outLogin()"></u-button>
			</view>
		</view>
		<view class="function col-12">
			<table class="table">
				<tr>
					<td @click="toPersonMessage()">
						<u-button class="custom-style" >修改信息</u-button>
					</td>
				</tr>
				<tr>
					<td @click="showToast()">
						<u-button class="custom-style1" >定时更新</u-button>
					</td>
				</tr>
				<tr>
					<td @click="toPersonMessage()">
						<u-button class="custom-style" >开通会员</u-button>
					</td>
				</tr>
				<tr>
					<td @click="toAboutUs()">
						<u-button class="custom-style" >关于我们</u-button>
					</td>
				</tr>
			</table>
		</view>
	</view>
</template>

<script>
	import {
		chooseImage,
		previewImage
	} from "@/common/utils/chooseImage.js" //上传图片以及后续读取封装
	import { pathToBase64, base64ToPath } from '@/node_modules/image-tools/index.js'
	export default {
		data() {
			return {
				user:[],
				isUser:false,
				userPhoto:''
			}
		},
		onShow() {
			this.initDate()
		},
		onLoad() {
			this.initDate()
			console.log(this.user)
		},
		methods: {
			initDate(){
				if(this.$storage.get("user") != []){
					this.user= JSON.parse( this.$storage.get("user"))
					this.isUser=true
					this.userPhoto = this.user.userPhotoUrl
				}	
			},
			showToast() {
				this.$utils.msg('功能暂未开通，敬请期待')
				// chooseImage().then(sucessMsg=>{
					
				// })
			},
			upImage() {
				// 从本地获取图片
				chooseImage().then(success=>{
					// 将图片转为base64格式,准备传到后端
					pathToBase64(success.tempFilePaths[0]).then(base64Success=>{
						this.$storage.set("userImageBase64",base64Success)
						let userImage = this.user.phone + '-title.jpg'
						let userAndImage = {
							"base64":base64Success.slice(23,-1),
							"user":this.user
						}
						//到后台用户图片保存API接口
						this.$http.httpPost('photo/upUserImage/'+userImage,userAndImage).then(upSuccess=>{
							console.log(upSuccess)
							// 分割传回的字符串,获取新的用户头像URL
							let url = upSuccess.data.data.slice(7)
							userAndImage.user.userPhotoUrl = url
							this.userPhoto = base64Success
							// 写入到Storage中
							this.$storage.setJson("user",userAndImage.user)
							this.$utils.msg(upSuccess.data.data.slice(0,6))
							// 刷新
							// this.$utils.reLaunch("../reLaunch/reLaunch?id=person")
						})
					})
				})
			},
			navToLogin() {
				this.$utils.navigateTo("ModelPage/login","")
			},
			navToRegister() {
				this.$utils.navigateTo("ModelPage/regiest","")
			},
			outLogin(){
				this.$http.httpGet("login/logout",'').then(response=>{
					// console.log(response.data)
					this.$utils.msg(response.data.data)
					uni.clearStorage()
					this.$utils.reLaunch('../ModelPage/login','')
				})
			},
			toPersonMessage(){
				this.$utils.navigateTo("VIP/VIP","")
			},
			toAboutUs(){
				this.$utils.navigateTo("person/aboutUs","")
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import  "person.scss" ;
</style>
